<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyan-Note - 订单管理 | 店长端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: 
                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%),
                linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            overflow-x: hidden;
            color: rgba(255, 255, 255, 0.95);
            position: relative;
        }

        /* 动态背景粒子 */
        .particle {
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            z-index: -1;
        }

        .particle:nth-child(1) {
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, rgba(255, 99, 132, 0.4), transparent);
            top: 20%;
            left: 10%;
            animation: float1 8s ease-in-out infinite;
        }

        .particle:nth-child(2) {
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, rgba(54, 162, 235, 0.4), transparent);
            top: 60%;
            right: 20%;
            animation: float2 8s ease-in-out infinite reverse;
        }

        .particle:nth-child(3) {
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(255, 206, 84, 0.4), transparent);
            bottom: 30%;
            left: 30%;
            animation: float3 8s ease-in-out infinite;
        }

        .particle:nth-child(4) {
            width: 90px;
            height: 90px;
            background: radial-gradient(circle, rgba(255, 99, 255, 0.4), transparent);
            top: 10%;
            right: 40%;
            animation: float4 8s ease-in-out infinite reverse;
        }

        .particle:nth-child(5) {
            width: 110px;
            height: 110px;
            background: radial-gradient(circle, rgba(75, 192, 192, 0.4), transparent);
            bottom: 10%;
            right: 10%;
            animation: float5 8s ease-in-out infinite;
        }

        @keyframes float1 {
            0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.5; }
            50% { transform: translateY(-20px) rotate(180deg) scale(1.1); opacity: 0.8; }
        }

        @keyframes float2 {
            0%, 100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 0.4; }
            50% { transform: translateX(20px) rotate(-180deg) scale(1.2); opacity: 0.7; }
        }

        @keyframes float3 {
            0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
            50% { transform: translateY(-15px) translateX(15px) scale(0.9); opacity: 0.9; }
        }

        @keyframes float4 {
            0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.3; }
            50% { transform: translateY(25px) rotate(90deg) scale(1.15); opacity: 0.6; }
        }

        @keyframes float5 {
            0%, 100% { transform: translateX(0) translateY(0) scale(1); opacity: 0.5; }
            50% { transform: translateX(-10px) translateY(-30px) scale(1.05); opacity: 0.8; }
        }

        /* 主容器 */
        .main-container {
            padding: 24px;
            padding-bottom: 120px; /* 为Dock留空 */
            max-width: 1800px;
            margin: 0 auto;
            min-height: 100vh;
        }

        /* 页面标题 */
        .page-title {
            font-size: 36px;
            font-weight: 800;
            text-align: center;
            margin-bottom: 32px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
            animation: gradientShift 4s ease-in-out infinite;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* 毛玻璃卡片基础样式 */
        .glass-card {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(25px);
            border: 1px solid rgba(255,255,255,0.4);
            border-radius: 24px;
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.2),
                0 0 60px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .glass-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
            transition: left 0.6s;
            pointer-events: none;
        }

        .glass-card:hover::before {
            left: 100%;
        }

        .glass-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.3),
                0 0 80px rgba(255, 255, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        /* 搜索筛选栏 */
        .search-filter-card {
            margin-bottom: 24px;
            padding: 28px;
        }

        .filter-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            gap: 16px;
            margin-bottom: 20px;
        }

        .filter-row:last-child {
            display: grid;
            grid-template-columns: 1fr 1fr auto auto;
            gap: 16px;
            margin-bottom: 0;
        }

        .filter-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .filter-label {
            font-size: 12px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .filter-input, .filter-select {
            padding: 12px 16px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.95);
            font-size: 14px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .filter-input:focus, .filter-select:focus {
            outline: none;
            border-color: #4ECDC4;
            box-shadow: 0 0 20px rgba(78, 205, 196, 0.5);
            background: rgba(255, 255, 255, 0.25);
        }

        .filter-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .filter-select option {
            background: rgba(118, 75, 162, 0.9);
            color: white;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 16px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .btn-primary {
            background: linear-gradient(135deg, #4ECDC4, #44A08D);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(78, 205, 196, 0.4);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #F39C12, #E67E22);
            color: white;
        }

        .btn-secondary:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(243, 156, 18, 0.4);
        }

        /* 订单列表卡片 */
        .order-list-card {
            padding: 28px;
        }

        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .list-title {
            font-size: 18px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.95);
        }

        .list-actions {
            display: flex;
            gap: 12px;
        }

        .btn-add {
            background: linear-gradient(135deg, #27AE60, #2ECC71);
            color: white;
            padding: 12px 20px;
            border-radius: 16px;
            font-size: 14px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-add:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
        }

        /* 表格样式 */
        .order-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .order-table th {
            background: rgba(255, 255, 255, 0.15);
            padding: 16px 12px;
            font-weight: 600;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .order-table td {
            padding: 16px 12px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.85);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        .order-table tbody tr {
            transition: all 0.3s ease;
        }

        .order-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* 状态标签 */
        .status-badge {
            padding: 6px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            animation: breathe 2s ease-in-out infinite;
        }

        @keyframes breathe {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
        }

        .status-pending {
            background: rgba(39, 174, 96, 0.2);
            color: #27AE60;
            border: 1px solid rgba(39, 174, 96, 0.3);
        }

        .status-progress {
            background: rgba(78, 205, 196, 0.2);
            color: #4ECDC4;
            border: 1px solid rgba(78, 205, 196, 0.3);
        }

        .status-unpaid {
            background: rgba(243, 156, 18, 0.2);
            color: #F39C12;
            border: 1px solid rgba(243, 156, 18, 0.3);
        }

        .status-paid {
            background: rgba(39, 174, 96, 0.2);
            color: #27AE60;
            border: 1px solid rgba(39, 174, 96, 0.3);
        }

        .status-crashed {
            background: rgba(231, 76, 60, 0.2);
            color: #E74C3C;
            border: 1px solid rgba(231, 76, 60, 0.3);
        }

        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .pagination .btn {
            padding: 8px 12px;
            font-size: 14px;
            min-width: 36px;
            text-align: center;
        }

        .pagination .btn.active {
            background: linear-gradient(135deg, #4ECDC4, #44A08D);
            color: white;
        }

        /* Dock导航 */
        .dock {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 12px 20px;
            display: flex;
            gap: 16px;
            align-items: center;
            z-index: 1000;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .dock.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        .dock-item {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        .dock-item.active {
            background: linear-gradient(135deg, #4ECDC4, #44A08D);
        }

        .dock-item:hover {
            transform: translateY(-12px) scale(1.3) rotate(5deg);
        }

        .dock-item .tooltip {
            position: absolute;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .dock-item:hover .tooltip {
            opacity: 1;
            bottom: 75px;
        }

        /* 模态框 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
        }

        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(25px);
            border: 1px solid rgba(255,255,255,0.4);
            border-radius: 24px;
            padding: 32px;
            width: 90%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            transform: scale(0.8) translateY(50px);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        .modal-overlay.show .modal {
            transform: scale(1) translateY(0);
        }

        .modal-title {
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 24px;
            color: rgba(255, 255, 255, 0.95);
        }

        .modal-form {
            display: grid;
            gap: 20px;
        }

        .form-section {
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
            color: rgba(255, 255, 255, 0.9);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }

        .form-row.single {
            grid-template-columns: 1fr;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-label {
            font-size: 14px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
        }

        .required {
            color: #E74C3C;
        }

        .customer-info {
            margin-top: 8px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
        }

        .worker-selection {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
        }

        .worker-item {
            padding: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .worker-item:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(78, 205, 196, 0.5);
        }

        .worker-item.selected {
            background: rgba(78, 205, 196, 0.2);
            border-color: #4ECDC4;
        }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 16px;
            margin-top: 24px;
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .filter-row {
                grid-template-columns: 1fr 1fr 1fr;
            }
            
            .order-table {
                font-size: 12px;
            }
            
            .order-table th,
            .order-table td {
                padding: 12px 8px;
            }
        }

        @media (max-width: 768px) {
            .main-container {
                padding: 16px;
            }
            
            .filter-row {
                grid-template-columns: 1fr;
            }
            
            .order-table {
                display: none;
            }
            
            .mobile-cards {
                display: block;
            }
        }

        .mobile-cards {
            display: none;
        }

        .order-card {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }

        .order-card:hover {
            transform: translateY(-4px);
            background: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body>
    <!-- 动态背景粒子 -->
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>

    <div class="main-container">
        <!-- 页面标题 -->
        <h1 class="page-title">📋 订单管理</h1>

        <!-- 搜索筛选栏 -->
        <div class="glass-card search-filter-card">
            <div class="filter-row">
                <div class="filter-item">
                    <label class="filter-label">老板昵称</label>
                    <input type="text" class="filter-input" placeholder="输入客户昵称搜索..." id="customerNameFilter">
                </div>
                <div class="filter-item">
                    <label class="filter-label">打手名称</label>
                    <select class="filter-select" id="workerFilter" multiple>
                        <option value="">请选择打手</option>
                        <option value="小明">小明</option>
                        <option value="小红">小红</option>
                        <option value="小刚">小刚</option>
                        <option value="小丽">小丽</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label class="filter-label">订单类型</label>
                    <select class="filter-select" id="orderTypeFilter">
                        <option value="">全部类型</option>
                        <option value="陪玩单">陪玩单</option>
                        <option value="护航单">护航单</option>
                        <option value="技能单">技能单</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label class="filter-label">订单来源</label>
                    <select class="filter-select" id="orderSourceFilter">
                        <option value="">全部来源</option>
                        <option value="微信小程序">微信小程序</option>
                        <option value="H5网站">H5网站</option>
                        <option value="店长代下">店长代下</option>
                    </select>
                </div>
                <div class="filter-item">
                    <label class="filter-label">订单状态</label>
                    <select class="filter-select" id="statusFilter" multiple>
                        <option value="">全部状态</option>
                        <option value="待开始">🟢 待开始</option>
                        <option value="进行中">🔵 进行中</option>
                        <option value="未结账">🟠 未结账</option>
                        <option value="已付款">✅ 已付款</option>
                        <option value="炸单">❌ 炸单</option>
                    </select>
                </div>
            </div>
            <div class="filter-row">
                <div class="filter-item">
                    <label class="filter-label">开始时间</label>
                    <input type="datetime-local" class="filter-input" id="startTimeFilter">
                </div>
                <div class="filter-item">
                    <label class="filter-label">结束时间</label>
                    <input type="datetime-local" class="filter-input" id="endTimeFilter">
                </div>
                <div class="filter-item" style="align-self: end;">
                    <button class="btn btn-primary" onclick="searchOrders()">🔍 搜索</button>
                </div>
                <div class="filter-item" style="align-self: end;">
                    <button class="btn btn-secondary" onclick="resetFilters()">🔄 重置</button>
                </div>
            </div>
        </div>

        <!-- 订单列表 -->
        <div class="glass-card order-list-card">
            <div class="list-header">
                <h2 class="list-title">订单列表</h2>
                <div class="list-actions">
                    <button class="btn-add" onclick="openAddOrderModal()">
                        ➕ 新增订单
                    </button>
                    <button class="btn btn-secondary">📥 批量导出</button>
                    <button class="btn btn-secondary">⚙️ 列显示配置</button>
                </div>
            </div>

            <!-- 桌面端表格 -->
            <table class="order-table">
                <thead>
                    <tr>
                        <th>订单日期</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>老板昵称</th>
                        <th>打手名称</th>
                        <th>订单类型</th>
                        <th>订单来源</th>
                        <th>状态</th>
                        <th>订单金额</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="orderTableBody">
                    <tr onclick="openOrderDetail('ORD001')">
                        <td>2025-01-11</td>
                        <td>14:00</td>
                        <td>18:00</td>
                        <td>张三</td>
                        <td>小明, 小红</td>
                        <td>陪玩单</td>
                        <td>微信小程序</td>
                        <td><span class="status-badge status-progress">🔵 进行中</span></td>
                        <td>¥200.00</td>
                        <td>王者荣耀上分...</td>
                        <td>
                            <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">详情</button>
                        </td>
                    </tr>
                    <tr onclick="openOrderDetail('ORD002')">
                        <td>2025-01-11</td>
                        <td>10:00</td>
                        <td>12:00</td>
                        <td>李四</td>
                        <td>小刚</td>
                        <td>护航单</td>
                        <td>H5网站</td>
                        <td><span class="status-badge status-unpaid">🟠 未结账</span></td>
                        <td>¥150.00</td>
                        <td>CSGO护航...</td>
                        <td>
                            <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">详情</button>
                        </td>
                    </tr>
                    <tr onclick="openOrderDetail('ORD003')">
                        <td>2025-01-11</td>
                        <td>16:00</td>
                        <td>20:00</td>
                        <td>王五</td>
                        <td>小丽</td>
                        <td>陪玩单</td>
                        <td>店长代下</td>
                        <td><span class="status-badge status-paid">✅ 已付款</span></td>
                        <td>¥240.00</td>
                        <td>LOL峡谷...</td>
                        <td>
                            <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">详情</button>
                        </td>
                    </tr>
                    <tr onclick="openOrderDetail('ORD004')">
                        <td>2025-01-10</td>
                        <td>20:00</td>
                        <td>22:00</td>
                        <td>赵六</td>
                        <td>小明</td>
                        <td>陪玩单</td>
                        <td>微信小程序</td>
                        <td><span class="status-badge status-pending">🟢 待开始</span></td>
                        <td>¥120.00</td>
                        <td>绝地求生...</td>
                        <td>
                            <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">详情</button>
                        </td>
                    </tr>
                    <tr onclick="openOrderDetail('ORD005')">
                        <td>2025-01-10</td>
                        <td>18:00</td>
                        <td>21:00</td>
                        <td>钱七</td>
                        <td>小刚, 小丽</td>
                        <td>护航单</td>
                        <td>H5网站</td>
                        <td><span class="status-badge status-crashed">❌ 炸单</span></td>
                        <td>¥300.00</td>
                        <td>客户临时取消...</td>
                        <td>
                            <button class="btn btn-primary" style="padding: 6px 12px; font-size: 12px;">详情</button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 移动端卡片 -->
            <div class="mobile-cards" id="mobileCards">
                <!-- 移动端卡片将通过JavaScript动态生成 -->
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <button class="btn btn-secondary">← 上一页</button>
                <button class="btn active">1</button>
                <button class="btn btn-secondary">2</button>
                <button class="btn btn-secondary">3</button>
                <button class="btn btn-secondary">4</button>
                <button class="btn btn-secondary">5</button>
                <button class="btn btn-secondary">下一页 →</button>
            </div>
        </div>
    </div>

    <!-- Dock导航 -->
    <div class="dock" id="dock">
        <div class="dock-item" onclick="navigateTo('dashboard')">
            <span>🏠</span>
            <div class="tooltip">工作台</div>
        </div>
        <div class="dock-item active" onclick="navigateTo('orders')">
            <span>📋</span>
            <div class="tooltip">订单管理</div>
        </div>
        <div class="dock-item" onclick="navigateTo('workers')">
            <span>👥</span>
            <div class="tooltip">打手管理</div>
        </div>
        <div class="dock-item" onclick="navigateTo('customers')">
            <span>👤</span>
            <div class="tooltip">客户管理</div>
        </div>
        <div class="dock-item" onclick="navigateTo('services')">
            <span>⚙️</span>
            <div class="tooltip">服务管理</div>
        </div>
        <div class="dock-item" onclick="navigateTo('finance')">
            <span>💰</span>
            <div class="tooltip">财务管理</div>
        </div>
        <div class="dock-item" onclick="navigateTo('settings')">
            <span>🔧</span>
            <div class="tooltip">店铺设置</div>
        </div>
        <div class="dock-item" onclick="navigateTo('logs')">
            <span>📊</span>
            <div class="tooltip">系统日志</div>
        </div>
    </div>

    <!-- 新增订单模态框 -->
    <div class="modal-overlay" id="addOrderModal">
        <div class="modal">
            <h2 class="modal-title">新增订单</h2>
            <form class="modal-form" onsubmit="submitOrder(event)">
                <!-- 必填信息 -->
                <div class="form-section">
                    <h3 class="section-title">必填信息 <span class="required">*</span></h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">老板昵称 <span class="required">*</span></label>
                            <input type="text" class="filter-input" placeholder="请输入客户昵称" id="modalCustomerName" oninput="validateCustomer(this.value)" required>
                            <div class="customer-info" id="customerInfo" style="display: none;"></div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">订单类型 <span class="required">*</span></label>
                            <select class="filter-select" id="modalOrderType" required>
                                <option value="">请选择订单类型</option>
                                <option value="陪玩单">陪玩单</option>
                                <option value="护航单">护航单</option>
                                <option value="技能单">技能单</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">订单来源 <span class="required">*</span></label>
                            <select class="filter-select" id="modalOrderSource" required>
                                <option value="">请选择订单来源</option>
                                <option value="微信小程序">微信小程序</option>
                                <option value="H5网站">H5网站</option>
                                <option value="店长代下">店长代下</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">订单日期 <span class="required">*</span></label>
                            <input type="date" class="filter-input" id="modalOrderDate" required>
                        </div>
                    </div>
                </div>

                <!-- 打手选择 -->
                <div class="form-section">
                    <h3 class="section-title">打手选择 <span class="required">*</span> (最少1个，最多2个)</h3>
                    <div class="worker-selection" id="workerSelection">
                        <div class="worker-item" onclick="selectWorker(this, 'W001')">
                            <input type="checkbox" style="margin-right: 8px;">
                            <span>小明 - 在线 - 当前2单进行中</span>
                        </div>
                        <div class="worker-item" onclick="selectWorker(this, 'W002')">
                            <input type="checkbox" style="margin-right: 8px;">
                            <span>小红 - 在线 - 当前0单</span>
                        </div>
                        <div class="worker-item" onclick="selectWorker(this, 'W003')">
                            <input type="checkbox" style="margin-right: 8px;">
                            <span>小刚 - 离线</span>
                        </div>
                        <div class="worker-item" onclick="selectWorker(this, 'W004')">
                            <input type="checkbox" style="margin-right: 8px;">
                            <span>小丽 - 在线 - 当前1单进行中</span>
                        </div>
                    </div>
                </div>

                <!-- 基础信息 -->
                <div class="form-section">
                    <h3 class="section-title">基础信息</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">开始时间</label>
                            <input type="time" class="filter-input" id="modalStartTime">
                        </div>
                        <div class="form-group">
                            <label class="form-label">结束时间</label>
                            <input type="time" class="filter-input" id="modalEndTime">
                        </div>
                    </div>
                    <div class="form-row single">
                        <div class="form-group">
                            <label class="form-label">订单金额</label>
                            <input type="number" class="filter-input" placeholder="¥0.00" step="0.01" id="modalAmount">
                        </div>
                    </div>
                </div>

                <!-- 备注信息 -->
                <div class="form-section">
                    <h3 class="section-title">备注信息</h3>
                    <div class="form-row single">
                        <div class="form-group">
                            <textarea class="filter-input" rows="3" placeholder="客户要求、服务内容等备注信息..." id="modalRemark" style="resize: vertical; min-height: 80px;"></textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeAddOrderModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存订单</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Dock自动显示隐藏逻辑
        let dockTimeout;
        let isMouseInDock = false;

        document.addEventListener('mousemove', function(e) {
            const windowHeight = window.innerHeight;
            const mouseY = e.clientY;
            
            if (mouseY > windowHeight - 100) {
                showDock();
            } else if (!isMouseInDock) {
                hideDock();
            }
        });

        document.getElementById('dock').addEventListener('mouseenter', function() {
            isMouseInDock = true;
            showDock();
        });

        document.getElementById('dock').addEventListener('mouseleave', function() {
            isMouseInDock = false;
            dockTimeout = setTimeout(hideDock, 800);
        });

        function showDock() {
            clearTimeout(dockTimeout);
            document.getElementById('dock').classList.add('show');
        }

        function hideDock() {
            if (!isMouseInDock) {
                document.getElementById('dock').classList.remove('show');
            }
        }

        // 页面导航
        function navigateTo(page) {
            alert('导航到: ' + page);
        }

        // 搜索和筛选功能
        function searchOrders() {
            const filters = {
                customerName: document.getElementById('customerNameFilter').value,
                worker: document.getElementById('workerFilter').value,
                orderType: document.getElementById('orderTypeFilter').value,
                orderSource: document.getElementById('orderSourceFilter').value,
                status: document.getElementById('statusFilter').value,
                startTime: document.getElementById('startTimeFilter').value,
                endTime: document.getElementById('endTimeFilter').value
            };
            
            console.log('搜索条件:', filters);
            alert('搜索功能已触发，查看控制台了解搜索条件');
        }

        function resetFilters() {
            document.getElementById('customerNameFilter').value = '';
            document.getElementById('workerFilter').selectedIndex = 0;
            document.getElementById('orderTypeFilter').selectedIndex = 0;
            document.getElementById('orderSourceFilter').selectedIndex = 0;
            document.getElementById('statusFilter').selectedIndex = 0;
            document.getElementById('startTimeFilter').value = '';
            document.getElementById('endTimeFilter').value = '';
        }

        // 模态框控制
        function openAddOrderModal() {
            document.getElementById('addOrderModal').classList.add('show');
            // 设置默认日期为今天
            document.getElementById('modalOrderDate').value = new Date().toISOString().split('T')[0];
        }

        function closeAddOrderModal() {
            document.getElementById('addOrderModal').classList.remove('show');
            // 重置表单
            document.querySelector('.modal-form').reset();
            document.getElementById('customerInfo').style.display = 'none';
            // 清除打手选择
            document.querySelectorAll('.worker-item').forEach(item => {
                item.classList.remove('selected');
                item.querySelector('input').checked = false;
            });
        }

        // 客户信息校验
        function validateCustomer(customerName) {
            const customerInfo = document.getElementById('customerInfo');
            
            if (customerName.length < 2) {
                customerInfo.style.display = 'none';
                return;
            }
            
            // 模拟客户信息校验
            setTimeout(() => {
                const customers = {
                    '张三': { status: 'normal', balance: 150, debt: 0, orders: 12 },
                    '李四': { status: 'normal', balance: 0, debt: 80, orders: 5 },
                    '王五': { status: 'blacklisted', balance: 0, debt: 200, orders: 3 },
                };
                
                const customer = customers[customerName];
                if (customer) {
                    let statusText = '';
                    if (customer.status === 'normal') {
                        if (customer.balance > 0) {
                            statusText = `✅ 客户状态：正常 | 💰 账户余额：¥${customer.balance} | 📊 历史订单：${customer.orders}单`;
                        } else if (customer.debt > 0) {
                            statusText = `✅ 客户状态：正常 | ⚠️ 欠款：¥${customer.debt} | 📊 历史订单：${customer.orders}单`;
                        } else {
                            statusText = `✅ 客户状态：正常 | 📊 历史订单：${customer.orders}单`;
                        }
                    } else if (customer.status === 'blacklisted') {
                        statusText = `❌ 客户状态：已拉黑 | ⚠️ 请谨慎处理 | 📊 历史订单：${customer.orders}单`;
                    }
                    customerInfo.innerHTML = statusText;
                    customerInfo.style.display = 'block';
                } else {
                    customerInfo.innerHTML = '💡 新客户，保存订单时将自动创建客户档案';
                    customerInfo.style.display = 'block';
                }
            }, 300);
        }

        // 打手选择
        let selectedWorkers = [];

        function selectWorker(element, workerId) {
            const checkbox = element.querySelector('input');
            
            if (checkbox.checked) {
                // 取消选择
                checkbox.checked = false;
                element.classList.remove('selected');
                selectedWorkers = selectedWorkers.filter(id => id !== workerId);
            } else {
                // 选择打手
                if (selectedWorkers.length >= 2) {
                    alert('最多只能选择2个打手');
                    return;
                }
                checkbox.checked = true;
                element.classList.add('selected');
                selectedWorkers.push(workerId);
            }
            
            console.log('已选择打手:', selectedWorkers);
        }

        // 提交订单
        function submitOrder(event) {
            event.preventDefault();
            
            if (selectedWorkers.length === 0) {
                alert('请至少选择1个打手');
                return;
            }
            
            const formData = {
                customerName: document.getElementById('modalCustomerName').value,
                orderType: document.getElementById('modalOrderType').value,
                orderSource: document.getElementById('modalOrderSource').value,
                orderDate: document.getElementById('modalOrderDate').value,
                startTime: document.getElementById('modalStartTime').value,
                endTime: document.getElementById('modalEndTime').value,
                amount: document.getElementById('modalAmount').value,
                remark: document.getElementById('modalRemark').value,
                workers: selectedWorkers
            };
            
            console.log('订单数据:', formData);
            alert('订单创建成功！\n查看控制台了解订单详情');
            closeAddOrderModal();
        }

        // 订单详情
        function openOrderDetail(orderId) {
            alert('查看订单详情: ' + orderId);
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 延迟显示Dock提示
            setTimeout(() => {
                if (!document.getElementById('dock').classList.contains('show')) {
                    showDockHint();
                }
            }, 5000);
        });

        function showDockHint() {
            // 可以添加提示用户Dock导航的逻辑
            console.log('提示：将鼠标移动到页面底部可显示导航菜单');
        }

        // 点击模态框背景关闭
        document.getElementById('addOrderModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeAddOrderModal();
            }
        });

        // ESC键关闭模态框
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeAddOrderModal();
            }
        });
    </script>
</body>
</html>